<template>
    <Table 
        border
        stripe
        :columns="columns"
        :data="data.data"
        :loading="data.isLoading">
    </Table>
</template>
<script>
import filterTime from '@/filters/filterTime.js'
import filterApp from '@/filters/filterApp.js'

export default {
    name: 'UserListView.vue',
    props: ['data'],
    data() {
        return {
            columns: [
                {
                    title: '用户id',
                    key: 'userid',
                    width: 120,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '账户',
                    key: 'account',
                    width: 150,
                    align: 'center',
                },
                {
                    title: '名称',
                    key: 'name',
                    width: 200,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '性别',
                    key: 'sex',
                    width: 200,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        return h('span', filterApp.formatGender(params.row.sex));
                    }
                },
                {
                    title: '头像',
                    key: 'headimg',
                    width: 150,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                        if(params.row.headimg==null || params.row.headimg=='' || params.row.headimg==undefined){
                            return h('span', "--");
                        }
                        return h('img',{
                            attrs: {src: (params.row.headimg)},
                            style: {
                                width: "100px",
                                verticalAlign: "middle"
                            },
                        },'img');
                    }
                },
                {
                    title: '用户等级',
                    key: 'lv',
                    width: 100,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '用户经验',
                    key: 'exp',
                    width: 100,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '用户金币',
                    key: 'coins',
                    width: 100,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '用户宝石',
                    key: 'gems',
                    width: 100,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '房间',
                    key: 'roomid',
                    width: 120,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '历史',
                    key: 'history',
                    width: 120,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '登录时间',
                    key: 'loginTime',
                    width: 160,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                        return h('span',filterTime.formatTimestamp(params.row.loginTime));
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        let array = new Array();
                        let rechargeBtn = h('Button', {
                            props: {
                                type: 'warning',
                                size: 'small'
                            },
                            style: {
                                marginTop: '5px',
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.onAction({action: 'recharge', data: params.row})
                                }
                            }
                        }, '充值');

                        let showBtn = h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginTop: '5px',
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.onAction({action: 'edit', data: params.row})
                                }
                            }
                        }, '查看战绩');
                        let userCircleBtn = h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginTop: '5px',
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.onAction({action: 'edit', data: params.row})
                                }
                            }
                        }, '用户圈子列表');
                        let userRechargeBtn = h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginTop: '5px',
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.onAction({action: 'edit', data: params.row})
                                }
                            }
                        }, '用户充值列表');
                        array.push(rechargeBtn);
                        array.push(showBtn);
                        array.push(userCircleBtn);
                        array.push(userRechargeBtn);
                        return h('div', array);
                    }
                }
            ]
        }
    },
    methods: {
        onAction (actionData) {
            this.$emit('on-action',actionData);
        }
    }
}
</script>
<style lang="less" scoped>

</style>



